<template>
  <div>
    <!-- 历史记录前进一页 -->
    <button @click="$router.forward()">前进</button>
    <!-- 历史记录后退一页 -->
    <button @click="$router.back()">后退</button>
    <!-- 历史记录前进或者后退 根据参数 正为前进 负为后退 -->
    <button @click="$router.go(1)">go</button>
    <p>Home</p>
    <!-- params字符串传参  -->
    <router-link to="/home/music/1">CNmusic</router-link>
    <!-- params 对象形式传参 注：不能书写path 得使用name -->
    <router-link :to="{ name: 'music', params: { id: '2' } }"
      >UNmusic</router-link
    >
    <br />
    <!-- query传参 字符串形式 -->
    <router-link to="/home/games?name=穿越火线&time=2007">Game1</router-link>
    <!-- query传参 对象形式 -->
    <router-link
      :to="{ path: '/home/games', query: { name: '英雄联盟', time: '2011' } }"
      >Game2</router-link
    >
    <br />
    <button @click="showHtml">HTML学科</button>
    <button @click="showCSS">CSS学科</button>
    <button @click="showJS">JS学科</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    //push和to属性的使用方式一样，也可以传递字符串，例如：this.$router.push('/about')
    showHtml() {
      this.$router.push({
        name: "Subject",
        query: {
          name: "HTML",
          type: "前端",
        },
      });
    },
    /* 
        push:保留历史记录
        replace:替换历史记录
      */
    showCSS() {
      this.$router.replace({
        name: "Subject",
        query: {
          name: "CSS",
          type: "前端",
        },
      });
    },
    showJS() {
      this.$router.push({
        name: "Subject",
        query: {
          name: "JS",
          type: "前端",
        },
      });
    },
    //注：如果params传值,直接传递的是一个对象,则路由配置不需要在使用动态parmas参数接受
    //可能会在历史回退的时候丢失值
  },
};
</script>

<style></style>
